<script setup>
import LayoutHeader from '@/components/LayoutComponents/LayoutHeaderComp.vue'
import LayoutMenu from '@/components/LayoutComponents/LayoutMenuComp.vue'
</script>

<template>
  <div class="layout">
    <el-container>
      <el-aside class="aside">
        <LayoutMenu/>
      </el-aside>
      <el-container>
        <el-header class="header">
          <LayoutHeader/>
        </el-header>
        <el-main class="main">
          <router-view>
          </router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped lang="scss">
.layout {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  .header {
    width: 100%;
  }
  .el-container {
    flex: 1;
    display: flex;
  }
  .aside {
    width: 200px; // 修改为你想要的宽度，这里以200px为例
  }
}
</style>
